{% extends "base.html" %}
{% block title %}
	LiveSociety
{% endblock %}
{% block menu %}
				<div id="hilite"></div>
				<span class="nb_item">
					<a href="/main">Home</a>
				</span>
				<span class="nb_item">
					<a href="/friends">Amigos</a>
				</span>
				<span class="nb_item">
					<a href="/messages">Mensajes</a>
				</span>
				<span class="nb_item">
					<a href="/settings">Preferencias</a>
				</span>
				<span class="nb_item">
					<a href="/logout">Salir</a>
				</span>
{% endblock %}
{% block content %}
	<form name="page" action="">
		<input type="hidden" name="section" value="Home">
	</form>
		<div id="body_wrapper">
			<div id="body_content_top">
				<div id="side_box">
					<div id="sb_avatar">
						<canvas class="avatar_bg" name="self" width="200" height="200">
						</canvas>
						<div id="sba_picture">
							{% if c_user.avatar %}
								<img src="{{ c_user.avatar }}" width="100%" height="100%">
							{% else %}
								<img src="/static/img/no_avatar.jpg" width="100%" height="100%">
							{% endif %}
						</div>
					</div>
					<div class="sb_comment">
						<p style="text-align: center;">{{ c_user.bio|default:"Sin Biografia" }}</p>
					</div>
				</div>
				<div id="right_box">
					
					<div id="alertbox">{{ msgbox|default:"" }}</div>
					{# test zone #}
					<div class="rb_comment">
						<form name="statf" onSubmit="sendstatus(); return false;">
							{% csrf_token %}
							<input type="text" name="stat" value="Cambia tu estado aqui">
							<input type="hidden" name="last_st" value="{{ last_status|default:"" }}">
							<input type="hidden" name="author" value="{{ c_user.mail }}">
						</form>
					</div>
					<div class="vt_spacer"></div>
					<div class="rb_title">Mis ultimos estados</div>
						{# si queremos limitar el numero de estado a aparecer, debe limitarce este for #}
						{% for state in cu_states %}
							<div class="rb_comment">
								<table width="600">
									<tr>
										<td>
											<b style="color: orange;">{{c_user.name}} {{c_user.lastname}}</b>: <b>{{ state.content }}</b>
											<br>
											<span style="margin-left: 2em; color: gray; font-size:10px;">El {{ state.date }} a las {{ state.time }}</span>
										</td> 
										<td align="right"><input type="button" onclick="ShowCommentBox(this);" value="Comentar"></td>
									</tr>
								</table>
								<div id="{{state.id}}" class="comments">
								{% for comment in state.replies.all reversed %}
									<b style='margin-left: 2em; color: orange'><a href="/{{comment.author.id}}">{{comment.author.name}} {{comment.author.lastname}}</a></b>: {{comment.content}}<br>
									<span style='margin-left: 4em; color: gray; font-size:10px;'>El {{comment.date}} a las {{comment.time}}</span><br>
								{% endfor %}
								</div>
								<div id="{{state.id}}" class="CommentBox">
									<form method="post" onSubmit="send_comment(this); return false;">
									{% csrf_token %}
										<table>
											<tr>
												<input type="hidden" name="s_id" value="{{state.id}}"/>
												<td><textarea name="c_content" style="resize: none; width: 400px; height: 50px; border:none;"></textarea></td>
											</tr>
											<tr>
												<td align="center"><input type="submit" value="Enviar"></td>
											</tr>
										</table>
									</form>
								</div>
							</div>
						{% empty %}
							<div class="rb_comment">
								No haz publicado estados, que esperas?!
							</div>
						{% endfor %}
				</div>
			</div>
			<div id="body_content_bottom">
				<div id="middle_box">
					<div class="rb_title alter_c">
						Mis &uacute;ltimos comentarios
					</div>
					{# si queremos limitar el numero de comentarios a aparecer, debe limitarce este for #}
					{% for comment in cu_comments %}
						<div class="rb_comment">
							<b style="color: orange;">{{ comment.author }} {{ comment.author.lastname }}</b>:{{ comment.content }}<br>
							<span style='margin-left: 2em; color: gray; font-size:10px;'>El {{ comment.date }} a las {{ comment.time }}</span>
						</div>
					{% empty %}
						<div class="rb_comment">
							No haz hecho comentarios
						</div>
					{% endfor %}
				</div>
				<div id="bottom_box">
					<div class="rb_title alter_c">
						&Uacute;ltimos estados de tus amigos
					</div>
					{# si queremos limitar el numero de estado a aparecer, debe limitarce este for #}
					{% for state in states_list %}
						<div class="friend_wrapper">
							<div class="friend_name">
								{{ state.s_author.name }} {{ state.s_author.lastname }}
							</div>
							<canvas class="fav_bg" name="pepito"width="120" height="120">
							</canvas>
							<div class="friend_avatar">
								{% if state.s_author.avatar %}
									<a href="/{{ state.s_author.id }}"><img src="{{ state.s_author.avatar }}" width="100%" height="100%"></a>
								{% else %}
									<a href="/{{ state.s_author.id }}"><img src="/static/img/no_avatar.jpg" width="100%" height="100%"></a>
								{% endif %}
							</div>
							<div class="friend_status">
								{{ state.s_content }}
							</div>
						</div>
					{% empty %}
					<b class="msgbox">Sin amigos!</b>
					{% endfor %}
				</div>
			</div>
		</div>
{% endblock%}
